<template>
  <div class="agencyRecord">
    <div class="header">
      <van-nav-bar title="申请记录" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
    </div>
    <section>
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="text"
        @load="onLoad"
        :offset="100"
        :immediate-check="false"
      >
        <ul v-if="recordData.list&&recordData.list.length>0">
          <li v-for="(item,index) in recordData.list"  :key="index">
            <div class="head">
              <p class="p1">真实姓名：</p>
              <p class="p2">{{item.name}}</p>
              <p class="p1">联系电话：</p>
              <p class="p2">{{item.phone}}</p>
              <p class="p1">详细地址：</p>
              <p class="p2">{{item.address}}</p>
              <p class="p1">申请额度：</p>
              <p class="p2">{{item.creditLimit}}</p>
            </div>
            <div class="foot">
              <p>提交申请 {{item.transactionDate}}</p>
              <div @click="link(item)">
                <span>查看办理进度</span>
                <van-icon name="arrow" />
              </div>
            </div>
          </li>
        </ul>
        <div class="empty" v-else>暂无数据</div>
      </van-list>
    </section>
  </div>
</template>

<script>
  export default {
    name: "loanRecord",
    data() {
      return {
        recordData:[],
        recordDataList:[],
        //下拉刷新
        isLoading: false,
        //上拉加载
        loading: false,
        finished: false,
        pageNum: 1,


      }
    },
    mounted() {
      this.getLoanRecordData();

    },
    methods: {
      //返回
      onClickLeft() {
        this.$router.go(-1);
      },
      link(item){
        this.$router.push({path: '/loanProgress', query:{id:item.id,name:item.name}})
      },
      //获取预订记录信息
      async getLoanRecordData() {
        let params = {
          pageNum: this.pageNum,
          pageSize:10,
        };
        const res = await this.$axios.post(this.$api.loanRecordData,params);
        if (res.success) {
          if (this.loading) {
            this.recordDataList = this.recordDataList.concat(res.data.list);
            this.recordData = res.data;
            this.recordData.list = this.recordDataList;
            if (this.recordData.list.length >= this.recordData.total) {
              this.finished = true;
            } else {
              this.pageNum++;
            }
          } else {
            this.recordData = res.data;
            if (this.recordData.list.length >= this.recordData.total) {
              this.finished = true;
              this.text='没有更多了'
            }
          }
          this.isLoading = false;
          this.loading = false;
        } else {
          this.$toast(res.msg);
        }
      },
      //下拉刷新
      onRefresh() {
        this.getLoanRecordData()
      },
      //上拉加载
      onLoad() {
        if (this.recordData.list && this.recordData.list.length > 0) {
          this.getLoanRecordData();

        }
      },






    }
  }
</script>

<style scoped>
  .agencyRecord{width: 100%;background-color: #f7f7f7;}
  section{padding-top: 0.46rem;}
  section ul li{width: 94%;margin: 0.1rem 3% 0;background-color: #fff;padding-top: 0.1rem;border-radius: 0.05rem;}
  .head{padding-bottom:0.06rem; overflow: hidden;}
  .p1{float: left;width: 29%;line-height: 0.24rem;text-align: right;padding-left: 0.15rem;color: #b0b0b0;}
  .p2{float: left;width: 70%;line-height: 0.24rem;padding-left: 0.1rem;}
  .foot{width: 90%;margin: 0 5%;border-top: 1px solid #f7f7f7;overflow: hidden;line-height: 0.43rem;}
  .foot p{float: left;color: #b0b0b0;}
  .foot div{float: right; }
  .foot div i{font-size: 0.14rem;position: relative;top:0.03rem;}
  .empty{
    text-align:center;
    width:100%;
    color:#999999;
    font-size:.16rem;
    padding:.2rem;
  }
</style>
